<template>
  <div>
    <el-row>
      <el-card style="background-color: white; padding: 30px; padding-top: 5px">
        <el-col :span="6">
          <span>订单编号：</span>
          <span class="text">{{ date1.id }}</span>
        </el-col>
        <el-col :span="6">
          <span>运单编号：</span>
          <span class="text">{{
            date1.transportOrder ? date1.transportOrder.id : "--"
          }}</span>
        </el-col>
        <el-col :span="6">
          <span>下单时间：</span>
          <span class="text">{{ date1.createTime }}</span>
        </el-col>
        <el-col :span="6">
          <span>订单状态：</span>
          <span class="text">{{ statusMap[date1.status] }}</span>
        </el-col>
        <el-col style="margin-top: 20px">
          <span>预计到达日期：</span>
          <span class="text">{{ date1.estimatedArrivalTime }}</span>
        </el-col>
      </el-card>
    </el-row>
    <el-row style="margin-top: 50px">
      <Xiangqing :title="'基本信息'">
        <template v-slot:one>
          <el-row style="margin: 50px">
            <el-col>
              <img
                style="width: 13px; height: 16px"
                alt=""
                src=""
              />
              <span style="font-size: 16px; margin-left: 6px">发货方</span>
            </el-col>
            <el-col style="margin-left: 25px" :span="12">
              <span>发货方姓名：</span>
              <span>{{ date1.senderName }}</span>
            </el-col>
            <el-col :span="10">
              <span>发货方电话：</span>
              <span>{{ date1.senderPhone }}</span>
            </el-col>
            <el-col style="margin-left: 25px" :span="12">
              <span>发货方地址：</span>
              <span>
                {{ date1.senderProvince.name }}
                {{ date1.senderCity.name }}
                {{ date1.senderCounty.name }}</span
              >
            </el-col>
            <el-col :span="10">
              <span>详细地址：</span>
              <span>{{ date1.senderAddress }}</span>
            </el-col>
            <el-col style="margin-top: 20px">
              <img
                style="width: 16px; height: 16px"
                alt=""
                src=""
              />
              <span style="font-size: 16px; margin-left: 6px">收货方</span>
            </el-col>
            <el-col style="margin-left: 25px" :span="12">
              <span>收货方姓名：</span>
              <span>{{ date1.receiverName }}</span>
            </el-col>
            <el-col :span="10">
              <span>收货方电话：</span>
              <span>{{ date1.receiverPhone }}</span>
            </el-col>
            <el-col style="margin-left: 25px" :span="12">
              <span>收货方地址：</span>
              <span>
                {{ date1.receiverProvince.name }}
                {{ date1.receiverCity.name }}
                {{ date1.receiverCounty.name }}</span
              >
            </el-col>
            <el-col :span="10">
              <span>详细地址：</span>
              <span>{{ date1.receiverAddress }}</span>
            </el-col>
            <el-col style="margin-top: 20px">
              <img
                style="width: 16px; height: 16px"
                alt=""
                src=""
              />
              <span style="font-size: 14px; margin-left: 6px; margin-right: 4px"
                >距离</span
              >
              <span>{{ date1.distance }}km</span>
            </el-col>
            <el-col style="margin-top: 20px; margin-left: 20px">
              <span style="font-size: 16px; margin-left: 6px">备注：</span>
              <span>暂无</span>
            </el-col>
          </el-row>
        </template>
      </Xiangqing>
    </el-row>
    <el-row v-if="date1.transportOrder" style="margin-top: 50px">
      <Xiangqing :title="'订单追踪'">
        <template #five>
          <el-row style="height: 60px"></el-row>
        </template>
      </Xiangqing>
    </el-row>
    <el-row v-if="date1.transportOrder" style="margin-top: 50px">
      <OrderMap></OrderMap>
    </el-row>
    <el-row style="margin-top: 50px">
      <Xiangqing :title="'取件信息'">
        <template #two>
          <el-row style="margin: 30px 50px 0 50px; font-size: 16px">
            <el-col :span="6">
              <span>所在网点：</span>
              <span class="text">{{
                date1.taskPickup.courier.agency.name
              }}</span>
            </el-col>
            <el-col :span="6">
              <span>取件类型：</span>
              <span class="text">上门取件</span>
            </el-col>
            <el-col :span="6">
              <span>作业状态：</span>
              <span class="text">{{
                date1.taskPickup.taskType === 0 ? "新任务" : "任务"
              }}</span>
            </el-col>
            <el-col :span="6">
              <span>取件快递员：</span>
              <span class="text">{{ date1.taskPickup.courier.name }}</span>
            </el-col>
          </el-row>
          <el-row style="margin: 30px 50px 18px 50px; font-size: 16px">
            <el-col :span="6">
              <span>快递员电话：</span>
              <span class="text">{{ date1.taskPickup.courier.mobile }}</span>
            </el-col>
            <el-col :span="6">
              <span>预计取件时间：</span>
              <span class="text">{{
                date1.taskPickup.estimatedStartTime
              }}</span>
            </el-col>
            <el-col :span="12">
              <span>取件完成时间：</span>
              <span class="text">{{ date1.taskPickup.estimatedEndTime }}</span>
            </el-col>
          </el-row>
        </template>
      </Xiangqing>
    </el-row>
    <el-row style="margin-top: 50px">
      <monet-message :date1="date1"></monet-message>
    </el-row>
    <el-row style="margin-top: 50px">
      <HuoMessage :tabelDate="tabelDate"></HuoMessage>
    </el-row>
  </div>
</template>

<script>
import { getOrderDanDateApi } from "@/api/business";
import Xiangqing from "@/views/business/components/Xiangqing.vue";
import MonetMessage from "@/views/business/components/monetMessage.vue";
import HuoMessage from "@/views/business/components/HuoMessage.vue";
import OrderMap from "@/views/business/components/OrderMap.vue";

export default {
  components: { OrderMap, HuoMessage, MonetMessage, Xiangqing },
  data() {
    return {
      tabelDate: [],
      formData: {
        open1: 1,
        open2: 2,
      },
      id: this.$route.params.id,
      date1: {},
      statusMap: {
        23000: "待取件",
        23001: "已取件",
        23005: "运输中",
        23008: "派送中",
        23009: "已签收",
        23010: "拒收",
        23011: "已取消",
      },
    };
  },
  created() {
    this.getOrderDanDateInfo();
  },
  methods: {
    async getOrderDanDateInfo() {
      console.log(this.id);
      const res = await getOrderDanDateApi(this.id);
      this.date1 = res.data.data;
      this.tabelDate = res.data.data.orderCargoDTOS;
      console.log(res.data.data);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-card {
  padding-bottom: 20px;
  ::v-deep .text {
    color: #818693;
    font-size: 14px;
  }
}
</style>
